<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <a-form-item label="品番编码">
                            <a-input ref="searchInput" v-model="queryParam.selectedSkuCode"
                                placeholder="请输入品番编码" @keyup.enter.native="handleScan"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <a-form-item label="货架编码">
                            <a-input v-model="queryParam.shelfCode" placeholder="请输入货架编码"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <a-form-item label="货架类型">
                            <a-select v-model="queryParam.shelfTypeCode" placeholder="请选择货架类型">
                                <a-select-option v-for="(item, index) in shelfTypeCodeList"
                                    :key="index" :value="item.shelfCode">
                                    {{ item.shelfName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="7" :md="8" :sm="24" :xl="6">
                        <span class="table-page-search-submitButtons"
                            style="float: left; overflow: hidden">
                            <a-button icon="search" type="primary"
                                @click="searchQuery">查询</a-button>
                            <a-button icon="reload" style="margin-left: 8px" type="primary"
                                @click="searchReset">重置</a-button>
                            <a style="margin-left: 8px" @click="handleToggleSearch">
                                {{ toggleSearchStatus ? '收起' : '展开' }}
                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
            <!-- 选择工作站 -->
            <div style="margin-bottom: 16px">
                <j-dict-select-tag v-model="receiveStation"
                    dictCode="basic_station_info,station_name,station_code" placeholder="请选择工作站"
                    style="width: 200px;" />
                <a-button type="primary" @click="callShelf('F')" size="large"
                    style="margin-left: 180px;">呼叫正面(F)</a-button>
                <a-button type="primary" @click="callShelf('B')" size="large"
                    style="margin-left: 80px;">呼叫反面(B)</a-button>
            </div>
        </div>
        <!-- 查询区域-END -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
                <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>
            <a-table ref="table" :columns="columns" :dataSource="dataSource" :loading="loading"
                :pagination="ipagination"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :scroll="{ x: true }" bordered class="j-table-force-nowrap" rowKey="id"
                size="middle" @change="handleTableChange" @expand="detail">
                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <!-- 子表 -->
                <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns"
                    :data-source="expandedData[text.id]" :pagination="false" rowKey="id"
                    size="small">
                </a-table>
            </a-table>
        </div>
    </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'

export default {
    name: 'BasicShelfList',
    mixins: [JeecgListMixin, mixinDevice],
    data() {
        return {
            /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
            queryParam: {},
            dataSource: [],
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    },
                },
                {
                    title: '货架编码',
                    align: 'center',
                    dataIndex: 'shelfCode',
                },
                {
                    title: '货架名称',
                    align: 'center',
                    dataIndex: 'shelfName',
                },
                {
                    title: '货架类型编码',
                    align: 'center',
                    dataIndex: 'shelfTypeCode_dictText',
                },
                {
                    title: '货架使用层数',
                    align: 'center',
                    dataIndex: 'useLayer',
                },
            ],
            innerColumns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    },
                },

                {
                    title: '品番编码',
                    align: 'center',
                    dataIndex: 'skuCode',
                },
                {
                    title: '货格编码',
                    align: 'center',
                    dataIndex: 'compartmentCode',
                },
                {
                    title: '库存箱数',
                    align: 'center',
                    dataIndex: 'inventoryBoxQuantity',
                },
                {
                    title: '可用数量',
                    align: 'center',
                    dataIndex: 'availableBoxQuantity',
                },
            ],
            url: {
                list: '/basicShelf/basicShelf/listAGV', // 货架列表
                getIpAddress: '/inOrder/inOrder/getIpAddress', // 获取客户端ip地址
                getShelfTypeCodeList: '/basicShelf/basicShelf/getShelfTypeCodeList', // 货架类型检索条件下拉列表
                getBasicShelfReportLabel: '/inventoryInfo/inventoryInfo/getSkuInfoByShelfCode', // 货架上的品番信息
                callShelf: '/inOrder/inOrder/callShelf', // 呼叫货架
            },
            dictOptions: {},
            superFieldList: [],
            expandedData: {}, // 货架上面的品番数据
            receiveStation: undefined, // 已选择的工作站编码
            shelfTypeCodeList: [], // 货架类型检索条件下拉列表
        }
    },
    mounted() {
        this.$refs.searchInput.focus()
    },
    created() {
        // 获取当前ip默认选择工作站
        this.chooseStation();
        // 货架类型检索条件下拉列表
        this.getShelfTypeCodeList()

        this.getSuperFieldList()
        // this.getCustomers()
        // this.getStations()
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        },
    },
    methods: {
        // 获取ip地址
        chooseStation() {
            postAction(this.url.getIpAddress).then((response) => {
                if (response.success) {
                    const { result } = response;
                    if ('192.168.20.74' === result) {
                        this.receiveStation = 1;
                    } else if ('192.168.20.84' === result) {
                        this.receiveStation = 2;
                    } else if ('192.168.20.60' === result) {
                        this.receiveStation = 3;
                    } else if ('192.168.20.76' === result) {
                        this.receiveStation = 4;
                    }
                }
            });
        },
        // 货架类型检索条件下拉列表
        getShelfTypeCodeList() {
            postAction(this.url.getShelfTypeCodeList).then((res) => {
                if (res.success) {
                    this.shelfTypeCodeList = res.result
                }
            })
        },
        // 监听输入框方法
        handleScan(event) {
            // 获取扫码枪扫描到的数据
            const scanData = event.target.value
            // 字符串格式：品番编码_其余参数
            const underscoreIndex = scanData.indexOf('_')
            if (underscoreIndex !== -1) {
                // 截取字符串,获取品番编码
                const partToQuery = scanData.substring(0, underscoreIndex);
                // 更新品番编码input框数据
                this.queryParam.selectedSkuCode = partToQuery
            }
        },
        // 查询货架上所有品番信息
        detail(expanded, record) {
            if (expanded) {
                let param = new FormData();
                param.append('shelfCode', record.shelfCode)
                postAction(this.url.getBasicShelfReportLabel, param)
                    .then((res) => {
                        this.$set(this.expandedData, record.id, res.result) // 保存该行的子表数据
                        console.log(res)
                    })
                    .catch((error) => {// 处理请求失败的错误F
                        this.$message.warning(res.message)
                    })
            }
        },
        // 呼叫货架
        callShelf(side) {
            if (!this.receiveStation) {
                this.$message.warning('请选择工作站！')
                return
            }
            postAction(this.url.callShelf, { stationCode: this.receiveStation, shelfIdList: this.selectedRowKeys, face: side })
                .then((res) => {
                    this.$message.success(res.message)
                })
                .catch((error) => {
                    this.$message.warning(res.message)
                })
        },
        initDictConfig() { },
        getSuperFieldList() {
            let fieldList = []
            fieldList.push({ type: 'string', value: 'shelfCode', text: '货架编码', dictCode: '' })
            fieldList.push({ type: 'string', value: 'shelfName', text: '货架名称', dictCode: '' })
            fieldList.push({ type: 'string', value: 'shelfTypeCode', text: '货架类型编码', dictCode: '' })
            fieldList.push({ type: 'BigDecimal', value: 'shelfUtilization', text: '货架使用率', dictCode: '' })
            fieldList.push({ type: 'string', value: 'valid', text: '是否有效', dictCode: '' })
            this.superFieldList = fieldList
        },
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>